import React,{ Component,Fragment } from 'react';
import {
	StyleSheet,
	View,
	Text,
	Image,
	TouchableOpacity,
	TextInput,
	Button,
	ScrollView
} from 'react-native';
import StorageUtil from '../../common/storageUtil';
import RadioModal from 'react-native-radio-master';
import Toast, {DURATION} from 'react-native-easy-toast';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import Axios from '../../axios';
import ScrollableTabView , { ScrollableTabBar }from 'react-native-scrollable-tab-view';
import NoDataPage from '../../common/NoDataPage';
class HeaderLeft extends Component{
	render(){
		return (<TouchableOpacity
				onPress={()=>this.props.goBack()}
			>
			<Image
				style={styles.topLeftImg}
				source={require('../../assets/images/back_icon.png')}
			/>
		</TouchableOpacity>)
	}
}
class NextStep extends Component{
	render(){
		return  <TouchableOpacity
					onPress={()=>this.props.nextStep()}
				>
					<View>
						<Text style={{color:'#fff',fontSize:16,marginRight:5}}>提交</Text>
					</View>
				</TouchableOpacity>
	}
}

export default class NetMaintainFinalStep extends Component{
	state = {
		phone:"",
		msgContent:"",
		initId:'0',
		ftpOperationname:'replaceWhite',
		selectIsFtp:'0',
		initRole:null,
		//showRoleData:null,
		mapObj:{},
		showRoleData:[]
	}
	static navigationOptions = ({navigation,navigationOptions})=>{
		const name = navigation.getParam("name");
		const policyId = navigation.getParam("policyId");
		const policyType = navigation.getParam("policyType");
		const productIds = navigation.getParam("productIds");
		const allCount = navigation.getParam("allCount");
		const productList = navigation.getParam("productList");
		const phone = navigation.getParam("phone");
		const msgContent = navigation.getParam("msgContent");
		const selectIsFtp = navigation.getParam("selectIsFtp");
		const selectProductList = navigation.getParam("selectProductList");
		const ftpOperationname = navigation.getParam("ftpOperationname");
		return {
			title:name,
			headerLeft:<HeaderLeft goBack={()=>navigation.navigate("NetMaintainThirdStep")}/>,
			headerRight: <NextStep nextStep={()=>{
							if((typeof(msgContent) == "undefined"||msgContent=='')&&selectIsFtp=='0'){
								navigation.getParam('toast').show('请填写发送内容',3);
							}else{
								navigation.navigate("CreateActivity",{
								name:'活动创建',
								policyId:policyId,
								productIds:productIds,
								allCount:allCount,
								selectProductList:selectProductList,
								policyType:policyType,
								phone:phone,
								initRole:navigation.getParam('initRole'),
								showRoleData:(typeof(navigation.getParam('showRoleData')) != "undefined"?navigation.getParam('showRoleData'):[]),
								mapObj:(typeof(navigation.getParam('mapObj')) != "undefined"?navigation.getParam('mapObj'):{}),
								selectIsFtp:selectIsFtp,
								msgContent:(typeof(msgContent) != "undefined"?msgContent:''),
								ftpOperationname:ftpOperationname,
								productList:productList
								})
							}
						}} />,
			headerStyle:{
				...navigationOptions.headerStyle,
				backgroundColor:"#f54545"
			},
			headerTitleStyle:{
				fontSize:18,
				flex:1,
				textAlign:'center'
			}
		}
	}
	componentDidMount() {
		 this.props.navigation.setParams({
		 	toast:this.refs.toast
		 });
		 this.props.navigation.setParams({selectIsFtp:'0'});
		 this.props.navigation.setParams({ftpOperationname:'replaceWhite'});
		 let _this = this;
		 StorageUtil.getItem(global.Constants.USER_ROLEDATA).then((val)=>{
		 	let mapObj = new Map();
			let  showRoleData = [];
			//let  showRoleData = [];
			let  i = 0;
			val.map(
                    (element,index)=>{
                		if(element.dataResValue.indexOf('ACTIVITY_TYPE')>-1){
							   let val = element.dataResValue.replace('ACTIVITY_TYPE=','');
							   if(i==0){
							   		initRole=val;
							   }
							   i++;
							   mapObj.set(element.dataResName,val);
							   showRoleData.push(element.dataResName);
							   //showRoleData.push((<Text  value={val}>{element.dataResName}</Text>));
                		}
                    });
              _this.props.navigation.setParams({
		 			initRole,showRoleData,mapObj
		 		});
		});
	}

	sendSms = ()=>{
		if(this.state.msgContent==""){
			this.refs.toast.show('请填写发送内容',3);
			return false;
		}
		var isChinaUniom = /^[1][3,4,5,7,8][0-9]{9}$/;
		if(!isChinaUniom.test(this.state.phone)){
			this.refs.toast.show('请填写有效的手机号码',3);
			return false;
		}
		Axios.ajax({
			url:'/mkt/sendOneSms',
			data:{'msgContent': this.state.msgContent,'phone': this.state.phone}
		}).then((res)=>{
			if(res.data.responseHeader.resultMessage=='成功'){
				this.refs.toast.show('发送成功',3);
			}else{
				this.refs.toast.show('发送失败',3);
			}
		})
	}
	selected(id,item){
		this.setState({selectIsFtp:id.initId})
		this.props.navigation.setParams({selectIsFtp:id.initId});
	}
	isShow(){
		if(this.state.selectIsFtp=='1'){
			return (
							<Fragment>
							<Text style={styles.label}>发送方式:</Text>
							<RadioModal
			                selectedValue={'replaceWhite'}
			                onValueChange={(id,item) => this.props.navigation.setParams({ftpOperationname:id})}
			                style={{ flexDirection:'row',
			                      alignItems:'flex-start'
			                      }} 
			                >
			                  <Text  value="replaceWhite">全量</Text>
			                  <Text  value="addWhite">增量</Text>
			               </RadioModal>
			               </Fragment>
						)
		}else{
			return (
							<Fragment>
							<Text style={styles.label}>话术:</Text>
							<TextInput 
								style={styles.textInput1}
								onChangeText={(text) => {
										this.props.navigation.setParams({
										 	msgContent:text
										 	});
										this.setState({'msgContent':text});
								}}
						        underlineColorAndroid={'transparent'}//去掉下划线
						        multiline={true}
							/>
							<Text style={styles.label}>测试号码:</Text>
							<TextInput 
								style={styles.textInput}
						        onChangeText={(text) => {
						        		this.props.navigation.setParams({
										 	phone:text
										 	});
										this.setState({'phone':text});
								}}
						        underlineColorAndroid={'transparent'}//去掉下划线
						        keyboardType="numeric"
						        editable={true}
							/>
							<View style={styles.submitWrap}>
								<TouchableOpacity onPress={() => {this.sendSms()}}>
									<View style={styles.submitBtn}><Text style={styles.submitBtnTxt}>发送测试</Text></View>
								</TouchableOpacity>
							</View>
							</Fragment>
			)
		}
	}
	render(){
		return (
			<ScrollView keyboardShouldPersistTaps={true}>
				<KeyboardAwareScrollView
				  keyboardShouldPersistTaps={true}
			      resetScrollToCoords={{ x: 0, y: 0 }}
			      contentContainerStyle={styles.container}
			      scrollEnabled={false}
			    >
				<View style={styles.stepWrap}>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active01.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>用户筛选</Text>
					</View>
					<View style={[styles.stepLine,styles.stepLineActive]}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active02.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>产品匹配</Text>
					</View>
					<View style={[styles.stepLine,styles.stepLineActive]}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active03.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>效果评估</Text>
					</View>
					<View style={[styles.stepLine,styles.stepLineActive]}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active04.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>触点匹配</Text>
					</View>
				</View>
				<View style={styles.policyContent}>
					<View style={styles.policyTitle}>
						<Image 
							style={styles.policyImage}
							source={require('../../assets/images/title_icon03.png')}
						/>
						<Text style={styles.policyTitleText}>触点匹配</Text>
					</View>
					<View style={styles.scrollTabWrap}>
						<ScrollableTabView
							renderTabBar={() => <ScrollableTabBar/>}
							tabBarUnderlineStyle={{height:2,backgroundColor:'#f54545'}}
							tabBarActiveTextColor='#f54545'
							tabBarInactiveTextColor='#757575'
							tabBarTextStyle={{fontSize:14}}
						>
							<View tabLabel='短信'>
								<View style={{padding:20}}>
									<Text style={styles.label}>目标用户:{this.props.navigation.state.params.allCount}人</Text>
									<Text style={styles.label}>发送类型:</Text>
					                <RadioModal
						                selectedValue={this.state.initId}
						                onValueChange={(id,item) => this.selected({initId:id})}
						                style={{ flexDirection:'row',
						                    alignItems:'flex-start'
				                        }} 
					                >
					                  <Text  value="0">群发</Text>
					                  <Text  value="1">触发</Text>
					               </RadioModal>
									{this.isShow()}
								</View>
							</View>
							<View tabLabel='微信'>
								<View style={{height:300}}>
									<NoDataPage 
										imageSource={require("../../assets/images/nopublish.png")}
										text={'微信模块正在开发中...'}
									/>
								</View>
							</View>
							<View tabLabel='营业厅扫码'>
								<View style={{height:300}}>
									<NoDataPage 
										imageSource={require("../../assets/images/nopublish.png")}
										text={'营业厅扫码模块正在开发中...'}
									/>
								</View>
							</View>
							<View tabLabel='营业厅弹窗'>
								<View style={{height:300}}>
									<NoDataPage 
										imageSource={require("../../assets/images/nopublish.png")}
										text={'营业厅弹窗模块正在开发中...'}
									/>
								</View>
							</View>
							<View tabLabel='沃行APP'>
								<View style={{height:300}}>
									<NoDataPage 
										imageSource={require("../../assets/images/nopublish.png")}
										text={'沃行APP模块正在开发中...'}
									/>
								</View>
							</View>
							<View tabLabel='导客入厅'>
								<View style={{height:300}}>
									<NoDataPage 
										imageSource={require("../../assets/images/nopublish.png")}
										text={'导客入厅模块正在开发中...'}
									/>
								</View>
							</View>
						</ScrollableTabView>
					</View>
				</View>
				</KeyboardAwareScrollView>
				<Toast 
					ref="toast"  
					position="bottom"
					positionValue={460}
					fadeInDuration={750}
                    fadeOutDuration={1000}
                    opacity={0.8}
				/>
			</ScrollView>
		)
	}
}

const styles=StyleSheet.create({
	topLeftImg:{
		width:22,
		height:22,
		marginLeft:10
	},
	scrollTabWrap:{
		height:440
	},
	submitWrap:{
		justifyContent:'center',
		alignItems:'center',
		marginTop:20
	},
	submitBtnTxt:{
		color:'#fff',
		fontSize:16
	},
	submitBtn:{
		color:'#fff',
		backgroundColor:'#f54545',
		height:40,
		paddingLeft:40,
		paddingRight:40,
		lineHeight:40,
		borderRadius:4,
		justifyContent:'center',
		alignItems:'center'
	},
	label:{
		color:'#4a4a4a',
		marginTop:10,
		marginBottom:5,
		fontSize:14
	},
	textInput:{
		borderWidth:1,
		borderColor:'#e6e6e6',
		height:40,
		paddingLeft:10,
		paddingRight:10,
		borderRadius:4,
		width:'80%'
	},
	textInput1:{
		borderWidth:1,
		borderColor:'#e6e6e6',
		height:100,
		paddingLeft:10,
		paddingRight:10,
		borderRadius:4,
		width:'80%'
	},
	effectItemTxt:{
		textAlign:'center',
		fontSize:14,
		color:'#4a4a4a',
		marginBottom:5
	},
	effectItem:{
		width:'33.33333%',
		marginTop:20
	},
	effectItemList:{
		flexDirection:'row',
		justifyContent:'space-between',
		flexWrap:'wrap',
		marginTop:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6',
		paddingBottom:20
	},
	totalTextTitle:{
		textAlign:'center',
		color:'#4a4a4a',
		fontSize:16
	},
	totalText:{
		textAlign:'center',
		color:'#f54545',
		fontSize:30,
		marginTop:5
	},
	effectContent:{
		paddingTop:20,
		paddingBottom:20
	},
	policySubTitleText:{
		color:'#ccc',
		textAlign:'center'
	},
	policySubTitle:{
		paddingTop:20
	},
	policiesContent:{
		paddingTop:20,
		paddingBottom:20,
		flexDirection:'row',
		flexWrap:'wrap',
		justifyContent:'center'
	},
	policyItem:{
		paddingTop:5,
		paddingRight:10,
		paddingBottom:5,
		paddingLeft:10,
		borderWidth:1,
		borderColor:'#ccc',
		color:'#ccc',
		borderRadius:14,
		marginBottom:10,
		marginLeft:5,
		marginRight:5
	},
	policyItemSelected:{
		borderColor:'#f54545',
		color:'#f54545'
	},
	policyContent:{
		backgroundColor:'#fff',
		marginTop:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6',
		borderTopWidth:1,
		borderTopColor:'#e6e6e6',
		paddingLeft:10,
		paddingRight:10
	},
	policyTitle:{
		flexDirection:'row',
		alignItems:'center',
		paddingTop:10,
		paddingBottom:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6',
	},
	policyTitleText:{
		fontSize:16,
		marginLeft:5,
		color:'#757575'
	},
	policyImage:{
		width:20,
		height:20
	},
	stepWrap:{
		backgroundColor:'#fff',
		flexDirection:'row',
		alignItems:'center',
		justifyContent:'space-around',
		paddingTop:5,
		paddingBottom:5,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6'
	},
	stepItem:{
		
	},
	stepImage:{
		width:50,
		height:50
	},
	stepTxt:{
		textAlign:'center',
		fontSize:10,
		marginTop:3,
		color:'#757575'
	},
	stepTxtActive:{
		color:'#f54545'
	},
	stepLine:{
		width:30,
		height:1,
		marginLeft:0,
		marginRight:0,
		marginBottom:10,
		backgroundColor:'#e6e6e6'
	},
	stepLineActive:{
		backgroundColor:'#f54545'
	}
})